<!--
 * @Description: 全局 树 组件
-->
<template>
  <div class="g-tree">
    <el-tree class="tree-line" v-bind="{ ...$props, ...$attrs }" :indent="0" ref="treeRef">
      <template #default="{ node }">
        <span class="custom-tree-node">
          <span>{{ node.label }}</span>
        </span>
      </template>
    </el-tree>
  </div>
</template>
<script lang="ts" setup name="GTreeUserRole">
import { ref, defineExpose } from 'vue';
const treeRef = ref();

function getCheckedKeys() {
  return treeRef.value.getCheckedKeys();
}

defineExpose({
  getCheckedKeys
});
</script>

<style lang="scss" scoped>
.g-tree {
  position: relative;
  .el-tree {
    position: relative;
    z-index: 1;
    background: transparent;
    :deep(.el-tree-node__content) {
      height: 36px;
      border: 1px solid transparent;
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #435970;
      line-height: 22px;
      .handle-button {
        display: none;
      }
    }
    :deep(.el-tree-node__expand-icon) {
      color: #979797;
    }
    :deep(.el-tree-node__expand-icon.is-leaf) {
      color: transparent;
    }
    .custom-tree-node {
      flex: 1;
      display: flex;
      justify-content: space-between;
    }
    .custom-tree-node.disabled {
      color: #979797;
    }
  }
}
</style>
<style lang="scss">
.tree-line {
  .el-tree-node {
    position: relative;
    padding-left: 8px; // 缩进量
  }
  > .el-tree-node {
    padding-left: 0;
  }
  .el-tree-node__children {
    padding-left: 8px; // 缩进量
  }

  // // 竖线
  // .el-tree-node::before {
  //   content: '';
  //   height: 100%;
  //   width: 1px;
  //   position: absolute;
  //   left: 6px;
  //   top: -20px;
  //   border-width: 1px;
  //   border-left: 1px dashed #ced4da;
  // }
  // 当前层最后一个节点的竖线高度固定
  .el-tree-node:last-child::before {
    height: 38px; // 可以自己调节到合适数值
  }

  // 横线
  // .el-tree-node::after {
  //   content: '';
  //   width: 10px;
  //   height: 20px;
  //   position: absolute;
  //   left: 6px;
  //   top: 18px;
  //   border-width: 1px;
  //   border-top: 1px dashed #ced4da;
  // }

  // // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
  // & > .el-tree-node::after {
  //   border-top: none;
  // }
  // & > .el-tree-node::before {
  //   border-left: none;
  // }

  // 展开关闭的icon
  .el-tree-node__expand-icon {
    font-size: 16px;
    // 叶子节点（无子节点）
    &.is-leaf {
      color: transparent;
    }
  }
  .el-tree-node__content:hover {
    background: transparent;
  }
  .el-tree-node:focus > .el-tree-node__content {
    background: transparent;
  }
}
</style>
